<template>
    <div class="star" :class="starType">
        <span v-for="(itemClass,index) of itemClasses" :class="itemClass" :key="index" class="star-item"></span>
    </div>
</template>
<script>
const LENGTH = 5;
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';
export default {
    props:{
        size:{
            type:Number
        },
        score:{
            type:Number
        }
    },
    computed:{
        starType(){
            return 'star-' + this.size;
        },
        itemClasses(){
            let result = [];
            let score = Math.floor(this.score * 2) / 2; //向下取整
            let hasDecimal = score % 1 !== 0;
            let integer = Math.floor(score);
            for(let i = 0;i<integer;i++){
                result.push(CLS_ON);
            }
            if(hasDecimal){      //小数点不为零
                result.push(CLS_HALF);
            }
            while(result.length < LENGTH){
                result.push(CLS_OFF);
            }            
            return result;
        }
    }
}
</script>
<style lang="less" scoped>
@import '../../assets/css/mixin.less';
.star{
    font-size: 0;
    .star-item{
        display: inline-block;
        background-repeat: no-repeat;
    } 
}
.star-48{
    .star-item{
        width: 20px;
        height: 20px;
        margin-right: 22px;
        background-size: 20px 20px;
        &:last-child{
            margin-right: 0;
        }
        &.on{
            .bgimage_one('star48_on');
        }
        &.half{
            .bgimage_one('star48_half');
        }
        &.off{
            .bgimage_one('star48_off');
        }     
    }
    
}      
.star-36 .star-item{
    width: 15px;
    height: 15px;
    margin-right: 16px;
    background-size: 15px 15px;
    &:last-child{
        margin-right: 0;
    }
    &.on{
        .bgimage_one('star36_on');
    }
    &.half{
        .bgimage_one('star36_half');
    }
    &.off{
        .bgimage_one('star36_off');
    }
}
.star-24 .star-item{
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background-size: 10px 10px;
    &:last-child{
        margin-right: 0;
    }
    &.on{
        .bgimage_one('star24_on');
    }
    &.half{
        .bgimage_one('star24_half');
    }
    &.off{
        .bgimage_one('star24_off');
    }
}
</style>
